<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘京</title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body >
	
	<div class="shopping" id="shop">
		<div class="head1">
			<div class="layui-row">
				<div class="layui-col-xs1">
					<div class="grid-demo"></div>
				</div>
				<div class="layui-col-xs4">
					<div class="grid-demo grid-demo-bg1">想淘精品好物，就上淘京</div>
				</div>

				<div class="layui-col-xs1">
					<div class="login">
						<div class="grid-demo grid-demo-bg1" id="classifiction_2" >
						<a id="login-reg" href="javascript:void(0)" onclick="logcheck()" style="margin-top: 5px;">登录/注册</a>
					</div>
					<div class="login_check">
						<div class="userpic"><a href="#" ><img src="imgs/购物.png" /></a></div>
						<div class="userinfo" >
							<div class="username" id="classifiction_2">
								<a id="uname" href="javascript:void(0)" >用户名</a>
								<h1><a href="javascript:void(0)" onclick="exit()">退出</a></h1>
							</div>
							<div class="userid" >ID:用户编号:<a id="uno" href="javascript:void(0)" ></a></div>
						</div>
					</div>
				</div>

			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="order.html">我的订单</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">我的淘京</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo grid-demo-bg1" id="classifiction_2"><a href="javascript:void(0)">商家服务</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">关于淘京</a></div>
			</div>
			<div class="layui-col-xs1">
				<div class="grid-demo" id="classifiction_2"><a href="javascript:void(0)">企业采购</a></div>
			</div>

		</div>

	</div>
	
	<div class="head">
	    
	      <div class="logo_pic"><a href="#"><img src="imgs/logo1.png" /></a></div>
		  
	      <div class="serch">
				<div class="serch_box"><input type="text" name="username" id="content"  placeholder="淘入好物，就用淘京"></div>
				<div class="serch_pic" ><a href="javascript:void(0)" @click="showDatail()"><img src="imgs/serch.png"/></a></div>
		  </div>
		  <div class="shoppingcart">
			  <div class="shoppingcart_pic"><img src="imgs/shoppingcart.png" /></div>
			  <div class="shoppingcart_char"><a href="cart.html"><h1>我的购物车<div class="num" >{{carttotal}}</div></h1></a></div>
		  </div>
	</div>
		<div class="classification">
			<div class="layui-row">
			    <div class="layui-col-xs1">
			      <div class="grid-demo"></div>
			    </div>
				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1" id="classifiction_1"  ><a href="javascript:void(0)">商品分类</a></div>
				</div>
				<div class="layui-col-xs1">
				  <div class="grid-demo"></div>
				</div>
				
			    
				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1 cl1" id="cf1"><a href="javascript:void(0)" id="1" @click="showclassification">推荐</a></div>
				</div>

				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1 cl1" id="cf2"><a href="javascript:void(0)" id="2" @click="showclassification">美妆</a></div>
				</div>
				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1 cl1" id="cf3"><a href="javascript:void(0)" id="3" @click="showclassification">运动</a></div>
				</div>
				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1 cl1" id="cf4"><a href="javascript:void(0)" id="4" @click="showclassification">食品</a></div>
				</div>
				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1 cl1" id="cf5"><a href="javascript:void(0)" id="5" @click="showclassification">图书</a></div>
				</div>
				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1 cl1" id="cf6"><a href="javascript:void(0)" id="6" @click="showclassification">男装</a></div>
				</div>
				<div class="layui-col-xs1">
					<div class="grid-demo grid-demo-bg1 cl1" id="cf7"><a href="javascript:void(0)" id="7" @click="showclassification">鞋类</a></div>
				</div>
				<div class="layui-col-xs1">
				  <div class="grid-demo grid-demo-bg1 cl1" id="cf8"><a href="javascript:void(0)" id="8" @click="showclassification">居家好物</a></div>
				</div>
			    <div class="layui-col-xs1">
			      <div class="grid-demo cl1" id="cf9"><a href="javascript:void(0)" id="9" @click="showclassification">电子产品</a></div>
			    </div>
				<div class="layui-col-xs2">
				  <div class="grid-demo"></div>
				</div>
			  </div>
		</div>
		
		
		<fieldset class="layui-elem-field layui-field-title">
		
		</fieldset>
		
	    <div class="recommend" >
			<div class="backgroudimage"><img src="imgs/backpic.jpg"/></div>

	       <div class="layui-carousel" id="test10">
	         <div class="layui-carousel_1" carousel-item="">
	           <div><a href="javascript:void(0)"  @click="showbrand"><img src="imgs/01.jpg" id="女装"></a></div>
	           <div><a href="javascript:void(0)" @click="showbrand"><img src="imgs/02.jpg" id="男装"></a></div>
			   <div><a href="javascript:void(0)" @click="showbrand"><img src="imgs/03.jpg" id="HUAWEI"></a></div>
	         </div>
	       </div>
	    </div>
	   
		
		<div class="dayspush">
			<div class="dayspic"><img src="imgs/dayspush.jpg"/></div>
			<div class="dayspush_goods">
				<div class="day_goods" @click="showbrand">
					<a href="javascript:void(0)" ><img src="imgs/daygoods1.jpg" id="男装"/></a>
					<p class="dname">冬日男装专区</p>
				</div>
				<div class="day_goods" @click="showbrand">
					<a href="javascript:void(0)"><img src="imgs/daygoods2.jpg"  id="斐乐"/></a>
					<p class="dname">斐乐FILA-玩趣潮童</p>
				</div>
				<div class="day_goods"  @click="showbrand">
					<a href="javascript:void(0)"><img src="imgs/daygoods3.png" id="逸阳"/></a>
					<p class="dname">逸阳ESE-Y男女装专场</p>
				</div>
				<div class="day_goods" @click="showbrand">
					<a href="javascript:void(0)"><img src="imgs/daygoods4.png" id="波司登"/></a>
					<p class="dname">波司登BOSIDENG专场</p>
				</div>
			</div>
		</div>
		
		
		
		
		
		<div class="push">
			<div class="name"><img src="imgs/push1.png"/></div>
			<div class="push_goods">
				<div class="goods" v-for="g in goods" >
					<a href="javascript:void(0)"@click="showgoodsId"><img :src="g.gpics"/></a>
					<p id="gno" style="height: 10px;display: none">{{g.gno}}</p>
					<h1 class="gname" style="height: 25px;margin-top:10px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{g.gname}}</h1>
					<div class="good1">
						<p class="gpics">￥{{g.gprice}}</p>
						<a href="javascript:void(0)" @click="getshoppingcart" id="addsc"><img src="imgs/shoppingcart2.png" style="width: 25px;height: 25px"></a>
					</div>
				</div>


			</div>
		</div>

		<div id="tishi">
			<div class="tipic">
				<img src="imgs/addshoppingok.png"/>
			</div>
			<div class="lei">
				<h1>成功加入购物车</h1>
			</div>
			<div class="sure" id="isure"><h1><a href="javascript:void(0)" @click="closeshoppingcart">再逛逛</a></h1></div>
			<div class="sure1" id="isure2"><h1><a href="javascript:void(0)" @click="goshoppingcart">去结算</a></h1></div>
		</div>
	
	<div id="footer" class="footer">
		<p> 关于我们 | 联系我们 | 联系客服 | 合作招商 | 商家帮助 | 营销中心 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 风险监测 | 质量公告 | 隐私政策 | 京东公益 | Media & IR</p>

<p>京公网安备 11000002000088号 | 京ICP备11041704号 | ICP | 药品医疗器械网络服务备案 | 自营医疗器械经营资质 | 药品网络交易第三方平台备案凭证 | 新出发京零 字第大120007号</p>

<p>互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2020]6112-1201号 | 违法和不良信息举报电话：4006561155</p>

<p>Copyright © 2004 - 2023  京东JINGDONG 版权所有 | 消费者维权热线：4006067733 | 经营证照 | 医疗器械第三方平台备案凭证（京）网械平台备字（2023）第00013号 | 营业执照 | 增值电信业务经营许可证</p>

<p>京东旗下网站： 京东钱包 | 京东云 | 网络内容从业人员违法违规行为举报电话：4006561155-3
</p>
	
	</div>
	</div>
	<script src="layui/layui.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script>

		window.onload = function() {
			$.get("user?op=check", function (rs) {
				if (rs.code == 601) {//暂未登录
				}
				if (rs.code == 200) {//登录成功
					var userData = localStorage.getItem('userData');
					if (userData) {
						userData = JSON.parse(userData);
						// 然后可以将userData传递给您需要的其他函数或组件进行处理
						$("#uname").html(userData.uname);
						$("#uno").html(userData.uno);
						$("#login-reg").html("欢迎:"+userData.uname);
					}
				}
			},"json");
		}
		function logcheck(){
			$.get("user?op=check", function (rs) {
				console.log(rs);
				if (rs.code == 601) {//暂未登录
					window.location.href = "login.html";
				}
				if (rs.code == 200) {//登录成功
					//到个人中心
					window.location.href = "personal.html";
					alert('你到个人中心了！')
				}
			},"json");
		}

		function exit(){
			$.get("user?op=exit", function (rs) {
				if (rs == 0) {//注销成功
					$("#uname").html('用户名');
					$("#uno").html('');
					$("#login-reg").html('登录/注册');
					localStorage.removeItem('userData');
					location.reload();

				}else{
					alert('退出失败');
				}
			},"json");
		}


<!--	<script>-->
<!--	<script>-->

		var userData = localStorage.getItem('userData');
		userData = JSON.parse(userData);
		if(userData!=null){
			var uno = userData.uno;
		}else{
			var uno = 0;
		}

		let sapp=new Vue({
			el:"#shop",
			data:{
				goods:{},
				carttotal:0,
				gdno:null,
				uno:uno
			},
			mounted:function(){
				axios.all([showgoods()]).then(axios.spread((rs1)=>{
					if (rs1.status==200){
						this.goods=rs1.data.data;
						this.goods=changePics(this.goods);
					}
				}));

				axios.get("cart",{params:{op:"carttotal",uno:this.uno}}).then(rs=>{
					if (rs.status==200){
						this.carttotal=rs.data.carttotal;
					}
				});
			},
			methods:{

				//搜索
				showDatail:function() {
					var gname=document.getElementById("content").value;
					location.href="search.html#"+gname;
				},
				//分类搜索
				showclassification:function (event) {
					var id=event.target.id;
					var classifica=document.getElementById(id).textContent;
					location.href="search.html#"+classifica;
				},
				//点击图片跳转到各品牌页面
				showbrand:function (event) {
					var id=event.target.id;
					location.href="search.html#"+id;
				},
				//获取商品gno跳转到商品详情页
				showgoodsId:function (event) {
					var g1=event.target;
					var g2=g1.parentElement.parentElement;
					var g3=g2.getElementsByTagName("p");
					//获取商品的gno
					var gno = g3[0].innerHTML;
					console.log(gno);
					//console.log(gno);
					location.href="details.html#"+gno;
				},
				//购物车
				getshoppingcart:function (event) {
					var g1=event.target;
					var g2=g1.parentElement.parentElement.parentElement;
					var g3= g2.getElementsByTagName("p");
					//获取商品的gno
					var gno = g3[0].innerHTML;
					//从登录框内获取uno
					var uno=uno;
					//默认数量为1
					var number=1;
					//获取gno的第一个gdno
					axios.get("goodsdetail",{params:{op:"searchGoodsDetail",gno:gno}}).then(rs=>{
						if (rs.status==200){
							var gd=rs.data.data;
							console.log(gd[0].gdno);
							this.gdno=gd[0].gdno;
						}
						//添加到购物车
						axios.get("cart",{params:{op:"addshoppingcart",number:number,uno:this.uno,gdno:this.gdno}}).then(rs=>{
							if (rs.status==200){
								this.carttotal=rs.carttotal;

								//点击提示添加到购物车成功
								// 获取要隐藏或显示的内容元素
								var hiddenContent = document.getElementById('tishi');
								// 获取目标链接元素
								var link = document.getElementById('link');
								// 监听链接的点击事件
								event.preventDefault(); // 阻止链接的默认跳转行为
								hiddenContent.style.display = 'flex'; // 显示隐藏的内容
							}
						});

					});
				},
				closeshoppingcart:function (event) {
					//点击关闭
					// 获取要隐藏或显示的内容元素
					var hiddenContent = document.getElementById('tishi');
					// 获取目标链接元素
					var sure = document.getElementById('isure');
					// 监听链接的点击事件
					event.preventDefault();// 阻止链接的默认跳转行为
					hiddenContent.style.display = 'none'; // 隐藏
					//刷新页面
					location.reload();
				},
				goshoppingcart:function (event) {
					//点击关闭
					// 获取要隐藏或显示的内容元素
					var hiddenContent = document.getElementById('tishi');
					// 获取目标链接元素
					var sure = document.getElementById('isure');
					// 监听链接的点击事件
					event.preventDefault();// 阻止链接的默认跳转行为
					hiddenContent.style.display = 'none'; // 隐藏
					location.href="cart.html#"+this.uno;/*点击结算，跳转到购物车页面，传入用户id*/
				}
			}
		});
			
		function showgoods(arr){
			return axios.get("tj?op=findGoods");
		}

		//处理图片 只需要一张图片路径 默认第一张图片
		function changePics(arr) {
			for (let i=0;i<arr.length;i++){
				var gpics=arr[i].gpics;
				console.log(gpics);
				if (gpics.indexOf(";")>0){
					gpics=gpics.substr(0,gpics.indexOf(";"));
					arr[i].gpics=gpics;
				}
			}
			return arr;
		}
		
	</script>
	
	
	<script>
	layui.use(['carousel', 'form'], function(){
	  var carousel = layui.carousel
	  ,form = layui.form;

	  //图片轮播
	  carousel.render({
	    elem: '#test10'
	    ,width: '1000px'
	    ,height: '370px'
	    ,interval: 3000
	  });
	});
	</script>
	</body>
</html>
